<template>
	<view class="receiptQuery-container">
		<view class="receiptQuery-container-search">
			<input type="number" class="search-input" @confirm="submit()" v-model="fieldValue" :focus="focus"
				:placeholder="$t('public.pleaseInput')+$t('public.instorageNo')" />
			<image src="../../../../../static/assets/public/clean.png" class="search-clean" @click="onClean"></image>
		</view>
		<view v-show="infoList">
			<formList ref="formRef" :formArr="formArr" :formObj.sync="formObj" :config="config" />
		</view>
		<view class="infoImg" v-show="infoImg">
			<image src="../../../../../static/assets/public/nodata.gif"></image>
		</view>

	</view>
</template>
<script>
	import formList from "../../../../../components/formList/formList.vue"
	import {
		getMapyByField
	} from "../../../../../api/homepage.js"
	export default {
		components: {
			formList,
		},
		data() {
			return {
				fieldValue: '',
				focus: true,
				infoList: false,
				infoImg: false,
				formArr: [{
						el: 'input',
						label: this.$t('public.instorageNo') + this.$t('public.colon'),
						code: 'billNo',
						type: 'text',
						required: false
					},
					{
						el: 'input',
						label: this.$t('homepage.StoreManagement.instoragePerson') + this.$t('public.colon'),
						code: 'billUserName',
						type: 'text',
						required: false
					}, {
						el: 'input',
						label: this.$t('homepage.StoreManagement.instorageDate') + this.$t('public.colon'),
						code: 'billDate',
						type: 'text',
						required: false
					}, {
						el: 'input',
						label: this.$t('public.warehousePositionCode') + this.$t('public.colon'),
						code: 'warehousePositionCode',
						type: 'text',
						required: false
					}, {
						el: 'input',
						label: this.$t('public.partName') + this.$t('public.colon'),
						code: 'partName',
						type: 'text',
						required: false
					}, {
						el: 'input',
						label: this.$t('public.partCode') + this.$t('public.colon'),
						code: 'partCode',
						type: 'text',
						required: false
					}, {
						el: 'input',
						label: this.$t('public.partSpec') + this.$t('public.colon'),
						code: 'partSpec',
						type: 'text',
						required: false
					}, {
						el: 'input',
						label: this.$t('homepage.StoreManagement.instorageNum') + this.$t('public.colon'),
						code: 'num',
						type: 'text',
						required: false
					}, {
						el: 'input',
						label: this.$t('public.instorageNo') + this.$t('public.colon'),
						code: 'surplusNum',
						type: 'text',
						required: false
					},
				],
				formObj: {
					id: '',
					billNo: '',
					billUserName: '',
					billDate: '',
					warehousePositionCode: '',
					partName: '',
					partCode: '',
					partSpec: '',
					num: '',
					surplusNum: '',
				},
				config: {
					labelShow: true, // 是否显示label
					labelWidth: '8em', // label文字宽度
					background: '#fff', // 背景颜色
				},
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.redirectTo({
					url: "/pages/HomePage/WarehouseManage/StorageManagement/queryService/receiptQuery/index"
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			onClean() {
				this.fieldValue = '',
					this.infoList = false,
					this.infoImg = false,
					this.focus = true
			},
			submit() {
				let that = this
				setTimeout(function() {
					that.search()
				}, 200)
			},
			search() {
				uni.hideKeyboard();
				if (!this.fieldValue) {
					uni.showToast({
						title: this.$t('public.pleaseInput') + this.$t('public.instorageNo'),
						icon: 'none',
						duration: 3000,
					});
					return;
				}
				// 提交
				getMapyByField({
					fieldValue: this.fieldValue,
					fieldName: 'billNo'
				}).then((res) => {
					if (res.code == 0) {
						this.infoList = true
						this.infoImg = false
						this.formObj.id = res.data.id
						this.formObj.billNo = res.data.billNo
						this.formObj.billUserName = res.data.billUserName
						this.formObj.billDate = res.data.billDate
						this.formObj.warehousePositionCode = res.data.warehousePositionCode
						this.formObj.partName = res.data.partName
						this.formObj.partCode = res.data.partCode
						this.formObj.partSpec = res.data.partSpec
						this.formObj.num = res.data.num
						this.formObj.surplusNum = res.data.surplusNum
					} else {
						this.infoList = false
						this.infoImg = true
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #fbfbfb;
	}

	.receiptQuery-container {

		.receiptQuery-container-search {
			display: flex;
			padding: 10px;
			background-color: #f8f7fc;
			margin-top: 5px;
		}

		.search-input {
			border-radius: 4px;
			height: 40px;
			width: 86%;
			background-color: #fbfbfb;
			padding-left: 10px;
		}

		.search-clean {
			width: 30px;
			height: 30px;
			margin-top: 5px;
			margin-left: 8px;
		}

		.infoImg {
			margin-top: 20px;
		}
	}
</style>